<template>
  <div class="hai row height900" :class="riback">
    <div class="center">
      <div class="active2-boy active2"></div>
      <div class="active2-girl active2"></div>
    </div>
    <!-- <div class="col">
      <div v-for="(v, i) in arr" :key="`1top2action${i}`" class="paopap rounded-circle" :style="v"></div>
    </div>-->
  </div>
</template>

<script>
export default {
  name: "top2action",
  data() {
    return {
      time1: null,
      arr: [],
      riback: "riback1"
    };
  },
  mounted() {
    // let i = 0;
    // this.time1 = setInterval(() => {
    //   this.riback = `riback${i + 1}`;
    //   i++;
    //   if (i == 6) {
    //     i = 0;
    //   }
    //   const style = this.creat();
    //   this.arr.push(style);
    //   setTimeout(() => {
    //     let x = Math.trunc(Math.random() * this.arr.length);
    //     this.arr.splice(x, 1);
    //   }, parseInt(style.transitionDuration) * 1000 + 300);
    // }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.time1);
  },
  methods: {
    creat() {
      const bottom = `${Math.random() * 80}%`;
      const left = `${Math.random() * 100}%`;
      const width = `${Math.random() * 75}px`;
      const height = width;
      const transitionDuration = `${Math.random() * 15 + 10}s`;
      const transitionProperty = "all";
      const transitionTimingFunction = `ease-out`;
      const backgroundColor = `rgba(${Math.trunc(
        256 - Math.random() * 145
      )},${Math.trunc(256 - Math.random() * 185)},${Math.trunc(
        256 - Math.random() * 150
      )},${1 - Math.random() * 0.7})`;
      const transform = `rotate(${Math.random() * 360}deg)`;
      return {
        bottom,
        left,
        width,
        height,
        transitionDuration,
        transitionProperty,
        transitionTimingFunction,
        backgroundColor,
        transform
      };
    }
  }
};
</script>
<style scoped>
.center {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
.hai {
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgb(236, 244, 255);
  position: relative;
  overflow: hidden;
  animation-name: active2;
  animation-direction: alternate;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  background-image: url(https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/activebg21.png);
}

@keyframes active2 {
  0% {
    background-image: url(https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/activebg21.png);
  }

  100% {
    background-image: url(https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/activebg21.png);
  }
}

.height900 {
  height: 900px;
  min-width: 1200px;
}
.paopap {
  position: absolute;
  bottom: 800px;
  left: 0;
  z-index: 75;
}
.active2 {
  animation-direction: alternate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  position: absolute;
  background-position-x: right;
  background-repeat: no-repeat;
  height: 130px;
}
.active2-boy {
  width: 50px;
  background-image: url(http://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/active2-boy.png);
  top: 580px;
  left: 925px;
  background-position-y: top;
  animation-name: active2-boy1;
  animation-timing-function: ease-in-out;
}

@keyframes active2-boy1 {
  0% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(20deg);
  }
}

.active2-girl {
  width: 130px;
  background-image: url(http://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/active2-girl.png);
  right: 57px;
  top: 372px;
  animation-name: active2-girl1;
  animation-timing-function: ease;
  background-position-y: center;
}

@keyframes active2-girl1 {
  0% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}
</style>
